<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
        <title>[[${model.getDocument().getTitle()}]] -文档</title>
        <link rel="icon" th:href="@{/css/img/{icon}.ico(icon=${model.getDocumentType().toString().toLowerCase()})}" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="css/editor.css" />
        <script type="text/javascript" th:src="@{${docserviceApiUrl}}"></script>
        <script th:inline="javascript">
           <!-- //文件编码
            //Thymeleaf的param对象始终返回字符串数组 ;必须通过[0]索引访问具体值,使用?.操作符可避免空指针异常-->
            var fileId= [[${param.fileId?.length > 0 ? param.fileId[0] : null}]];

               var docEditor;
               var config;

               var innerAlert = function (message, inEditor) {
                   if (console && console.log)
                       console.log(message);
                   if (inEditor && docEditor)
                       docEditor.showMessage(message);
               };

               // the application is loaded into the browser
               var onAppReady = function () {
                   innerAlert("编辑器加载完毕");
               };

               // the document is modified
               var onDocumentStateChange = function (event) {
                   var title = document.title.replace(/^\*/g, "");
                   document.title = (event.data ? "*" : "") + title;
               };

               // the user is trying to switch the document from the viewing into the editing mode
               var onRequestEditRights = function () {
                   location.href = location.href.replace(RegExp("\&?action=\\w+", "i"), "") + "&action=edit";
               };

               // an error or some other specific event occurs
               var onError = function (event) {
                   if (event) innerAlert(event.data);
               };

               // the document is opened for editing with the old document.key value
               var onOutdatedVersion = function (event) {
                   location.reload(true);
               };

               // replace the link to the document which contains a bookmark
               var replaceActionLink = function(href, linkParam) {
                   var link;
                   var actionIndex = href.indexOf("&actionLink=");
                   if (actionIndex != -1) {
                       var endIndex = href.indexOf("&", actionIndex + "&actionLink=".length);
                       if (endIndex != -1) {
                           link = href.substring(0, actionIndex) + href.substring(endIndex) + "&actionLink=" + encodeURIComponent(linkParam);
                       } else {
                           link = href.substring(0, actionIndex) + "&actionLink=" + encodeURIComponent(linkParam);
                       }
                   } else {
                       link = href + "&actionLink=" + encodeURIComponent(linkParam);
                   }
                   return link;
               }

               // the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position
               var onMakeActionLink = function (event) {
                   var actionData = event.data;
                   var linkParam = JSON.stringify(actionData);
                   docEditor.setActionLink(replaceActionLink(location.href, linkParam));
               };

               var onRequestClose = function () {  // close editor
                   docEditor.destroyEditor();
                   innerAlert("Document editor closed successfully");
               };

               var onUserActionRequired = function () {
                   console.log("User action required");
               };

               // the meta information of the document is changed via the meta command
               var onMetaChange = function (event) {
                   if (event.data.favorite !== undefined) {
                       var favorite = !!event.data.favorite;
                       var title = document.title.replace(/^\☆/g, "");
                       document.title = (favorite ? "☆" : "") + title;
                       docEditor.setFavorite(favorite);
                   }
                   innerAlert("onMetaChange: " + JSON.stringify(event.data));
               };


               var dataInsertImage = [[${dataInsertImage}]];

               // the user is trying to insert an image by clicking the Image from Storage button
               var onRequestInsertImage = function(event) {
                   const temp = Object.assign({}, {"c": event.data.c}, JSON.parse(dataInsertImage));
                   docEditor.insertImage(temp);
               };

               var dataDocument = [[${dataDocument}]];

               // the user is trying to select document for comparing by clicking the Document from Storage button
               var onRequestSelectDocument = function(event) {
                   const temp = Object.assign({"c": event.data.c}, JSON.parse(dataDocument));
                   docEditor.setRequestedDocument(temp);
               };

               var dataSpreadsheet = [[${dataSpreadsheet}]];

               // the user is trying to select recipients data by clicking the Mail merge button
               var onRequestSelectSpreadsheet = function (event) {
                   const temp = Object.assign({"c": event.data.c}, JSON.parse(dataSpreadsheet));
                   docEditor.setRequestedSpreadsheet(temp);
               };

               config = [[${model}]];
                if (config.editorConfig && config.editorConfig.customization.features) {
                       config.editorConfig.customization.features["featuresTips"] = false;
                   } else {
                       console.warn("config.editorConfig.features is undefined");
                   }
               if (config.editorConfig.user.name == "Anonymous") {
                   config.editorConfig.user.name = "";
               }

               var onRequestSaveAs = function (event) {  //  the user is trying to save file by clicking Save Copy as... button
                   var title = event.data.title;
                   var url = event.data.url;
                   var data = {
                       title: title,
                       url: url
                   };
                   let xhr = new XMLHttpRequest();
                   xhr.open("POST", "saveas");
                   xhr.setRequestHeader('Content-Type', 'application/json');
                   xhr.send(JSON.stringify(data));
                   xhr.onload = function () {
                       innerAlert(xhr.responseText);
                       innerAlert(JSON.parse(xhr.responseText).file, true);
                   }
               };

                //  the user is trying to rename file by clicking Rename... button
               var onRequestRename = function(event) {
                   innerAlert("onRequestRename: " + JSON.stringify(event.data));
                   var newfilename = event.data;
                   var data = {
                       fileId: fileId,
                       fileName: newfilename,
                       fileKey: config.document.key,
                       fileType: config.document.fileType
                   };
                   let xhr = new XMLHttpRequest();
                   xhr.open("POST", "rename");
                   xhr.setRequestHeader('Content-Type', 'application/json');
                   xhr.send(JSON.stringify(data));
                   xhr.onload = function () {
                       innerAlert(xhr.responseText);
                   }
               };

               var onRequestOpen = function(event) {  // user open external data source
                   innerAlert("onRequestOpen");
                   var windowName = event.data.windowName;

                   requestReference(event.data, function (data) {
                       if (data.error) {
                           var winEditor = window.open("", windowName);
                           winEditor.close();
                           innerAlert(data.error, true);
                           return;
                       }

                       var link = data.link;
                       window.open(link, windowName);
                   });
               };

               var onRequestRefreshFile = function(event) {
                   let xhr = new XMLHttpRequest();
                   xhr.open("GET", "config?fileId=" + fileId +
                       "&permissions=" + encodeURIComponent(JSON.stringify(config.document.permissions)));
                   xhr.send();
                   xhr.onload = function () {
                       innerAlert(xhr.responseText);
                       docEditor.refreshFile(JSON.parse(xhr.responseText));
                   };
               };

               var onRequestReferenceData = function(event) {  // user refresh external data source
                   innerAlert("onRequestReferenceData");

                   requestReference(event.data, function (data) {
                       docEditor.setReferenceData(data);
                   });
               };

               var requestReference = function(data, callback) {
                   innerAlert(data);

                   let xhr = new XMLHttpRequest();
                   xhr.open("POST", "reference");
                   xhr.setRequestHeader("Content-Type", "application/json");
                   xhr.send(JSON.stringify(data));
                   xhr.onload = function () {
                       innerAlert(xhr.responseText);
                       callback(JSON.parse(xhr.responseText));
                   }
               };

               var onRequestReferenceSource = function (event) {
                   innerAlert("onRequestReferenceSource");
                   let xhr = new XMLHttpRequest();
                   xhr.open("GET", "files");
                   xhr.setRequestHeader("Content-Type", "application/json");
                   xhr.send();
                   xhr.onload = function () {
                     if (xhr.status === 200) {
                       innerAlert(JSON.parse(xhr.responseText));
                       let fileList = JSON.parse(xhr.responseText);
                       let firstXlsxName;
                       let file;
                       for (file of fileList) {
                         if (file["title"]) {
                           if (getFileExt(file["title"]) === "xlsx")
                           {
                             firstXlsxName = file["title"];
                             break;
                           }
                         }
                       }
                       if (firstXlsxName) {
                         let data = {
                           path : firstXlsxName
                         };
                         let xhr = new XMLHttpRequest();
                         xhr.open("POST", "reference");
                         xhr.setRequestHeader("Content-Type", "application/json");
                         xhr.send(JSON.stringify(data));
                         xhr.onload = function () {
                           if (xhr.status === 200) {
                             docEditor.setReferenceSource(JSON.parse(xhr.responseText));
                           } else {
                             innerAlert("/reference - bad status");
                           }
                         }
                       } else {
                         innerAlert("No *.xlsx files");
                       }
                     } else {
                       innerAlert("/files - bad status");
                     }
                   }
                 };

               var onRequestHistory = function () {
                   var xhr = new XMLHttpRequest();
                   xhr.open("GET", "history?fileId=" + fileId, false);
                   xhr.send();

                   if (xhr.status == 200) {
                       var historyInfo = JSON.parse(xhr.responseText);
                       docEditor.refreshHistory(historyInfo);
                   }
               };

               var onRequestHistoryData = function (event) {
                   var version = event.data;
                   var historyDataUri = "historydata?fileId=" +fileId
                       + "&version=" + version;
                   var xhr = new XMLHttpRequest();
                   xhr.open("GET", historyDataUri, false);
                   xhr.send();

                   if (xhr.status == 200) {
                       var historyData = JSON.parse(xhr.responseText);
                       docEditor.setHistoryData(historyData);
                   }
               };

               var onRequestHistoryClose = function() {
                   document.location.reload();
               };

               function onRequestRestore(event) {
                 const query = new URLSearchParams(window.location.search)
                 const payload = {
                   fileId: fileId,
                   version: event.data.version,
                   url: event.data.url
                 }
                 const request = new XMLHttpRequest()
                 request.open('PUT', 'restore')
                 request.setRequestHeader('Content-Type', 'application/json')
                 request.send(JSON.stringify(payload))
                 request.onload = function () {
                   const response = JSON.parse(request.responseText);
                   if (response.success && !response.error) {
                     var historyInfoUri = "history?fileId=" +fileId;
                     var xhr = new XMLHttpRequest();
                     xhr.open("GET", historyInfoUri, false);
                     xhr.send();

                     if (xhr.status == 200) {
                         var historyInfo = JSON.parse(xhr.responseText);
                         docEditor.refreshHistory(historyInfo);
                     }
                   } else {
                     innerAlert(response.error);
                   }
                 }
               };

               var onRequestUsers = function (event) {
                   if (event && event.data) {
                        var c = event.data.c;
                       }

                   switch (c) {
                       case "info":
                           users = [];
                           var allUsers = [[${usersInfo}]];
                           for (var i = 0; i < event.data.id.length; i++) {
                               for (var j = 0; j < allUsers.length; j++) {
                                    if (allUsers[j].id == event.data.id[i]) {
                                       users.push(allUsers[j]);
                                       break;
                                   }
                               }
                           }
                           break;
                       case "protect":
                           var users = [[${usersForProtect}]];
                           break;
                       default:
                           users = [[${usersForMentions}]];
                   }

                   docEditor.setUsers({
                       "c": c,
                       "users": users,
                   });
               };

               var onRequestSendNotify = function(event) {  // the user is mentioned in a comment
                   event.data.actionLink = replaceActionLink(location.href, JSON.stringify(event.data.actionLink));
                   var data = JSON.stringify(event.data);
                   innerAlert("onRequestSendNotify: " + data);
               };

               config.width = "100%";
               config.height = "100%";
               config.events = {
                   "onAppReady": onAppReady,
                   "onDocumentStateChange": onDocumentStateChange,
                   "onUserActionRequired": onUserActionRequired,
                   "onError": onError,
                   "onOutdatedVersion": onOutdatedVersion,
                   "onMakeActionLink": onMakeActionLink,
                   "onMetaChange": onMetaChange,
                   "onRequestInsertImage": onRequestInsertImage,
                   "onRequestSelectDocument": onRequestSelectDocument,
                   "onRequestSelectSpreadsheet": onRequestSelectSpreadsheet
               };

               if (config.editorConfig.user.id != 4) {
                   config.events['onRequestRefreshFile'] = onRequestRefreshFile;
                   config.events['onRequestClose'] = onRequestClose;
                   // add mentions for not anonymous users
                   config.events['onRequestUsers'] = onRequestUsers;
                   config.events['onRequestSaveAs'] = onRequestSaveAs;
                   // the user is mentioned in a comment
                   config.events['onRequestSendNotify'] = onRequestSendNotify;
                   // prevent file renaming for anonymous users
                   if(config.document.permissions.edit){
                   config.events['onRequestRename'] = onRequestRename;
                   config.events['onRequestReferenceData'] = onRequestReferenceData;
                   // prevent switch the document from the viewing into the editing mode for anonymous users
                   config.events['onRequestEditRights'] = onRequestEditRights;
                   config.events['onRequestOpen'] = onRequestOpen;
                   config.events['onRequestHistory'] = onRequestHistory;
                   config.events['onRequestHistoryData'] = onRequestHistoryData;
                   //不需要
                   //config.events['onRequestReferenceSource'] = onRequestReferenceSource;
                   if (config.editorConfig.user.id != 3) {
                       config.events['onRequestHistoryClose'] = onRequestHistoryClose;
                       config.events['onRequestRestore'] = onRequestRestore;
                   }
                  }
               }

               var сonnectEditor = function () {
                   docEditor = new DocsAPI.DocEditor("iframeEditor", config);
               };

               const getFileExt = function (fileName) {
                   if (fileName.indexOf(".")) {
                     return fileName.split('.').reverse()[0];
                   }
                   return false;
                 };

               if (window.addEventListener) {
                   window.addEventListener("load", сonnectEditor);
               } else if (window.attachEvent) {
                   window.attachEvent("load", сonnectEditor);
               }
        </script>

    </head>
    <body>
        <div class="form">
            <div id="iframeEditor"></div>
        </div>
    </body>
</html>
